<template>
    <!-- Custom title bar for material library. -->
    <div class="header-content">
        <div class="left">
            <div class="title">
                {{ title }}
            </div>
        </div>
        <div class="content"></div>
        <div class="right">
            <div class="win-tools">
                <pui-icon name="close" @click="close(command)">
                </pui-icon>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { commandManager } from '@/common/cmd/manager';
const props = defineProps({
    title: {
        type: String,
        default: '',
        required: true
    },
    command: {
        type: String,
        default: '',
        required: true
    }
})
const close = (command: string) => {
    commandManager.executeCommand(command);
}
</script>
<script lang="ts">
export default {
    name: 'LayoutHeader',
}
</script>

<style lang="scss" scoped>
.header-content {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    user-select: none;
    width: 100%;
    height: 49px;
    box-sizing: border-box;
    background: #F5F7FA;
    .content {
        height: 100%;
        flex: 1;
        -webkit-app-region: drag;
        z-index: 1;
    }
    .left {
        height: 100%;
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .title {
            position: relative;
            left: 22px;
            /* Medium/Text1-Medium-14 */
            font-family: 'Source Han Sans Medium';
            font-size: 14px;
            font-weight: 500;
            line-height: 22px;
            letter-spacing: 0px;
            color: #303133;
        }
    }
    .right {
        position: relative;
        height: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .win-tools {
            height: 100%;
            margin-left: 20px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .pui-icon {
                font-size: 16px;
                padding: 0 12px;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                transition: background-color 0.3s ease-in-out;
                cursor: pointer;
                &:hover {
                    background: #CDD0D6;
                }
            }
        }

    }
}
</style>